<template>
  <a-select
    show-search
    @search="fetchUser"
    @change="handleChange"
    :mode="mode"
    :value="value"
  >
    <a-select-option
      v-for="item in data"
      :key="item.phoneNumber"
      :value="item.phoneNumber"
    >
      {{ item.username + '(' + item.phoneNumber + ')' }}
    </a-select-option>
  </a-select>
</template>

<script>
import { getData } from "@/utils/http";
import { URL_MAP } from "@/config/config";

export default {
  data() {
    return {
      data: [],
      mySelf: {},
      value: "",
    };
  },
  model: {
    prop: "person",
    event: "change",
  },
  props: {
    person: {
      type: [String, Array],
      default: null,
    },
    mode: {
      type: String,
      default: 'default'
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    username() {
      return this.$store.getters.username;
    },
    userid() {
      return this.$store.getters.userid;
    },
  },
  methods: {
    fetchUser(value) {
      getData(URL_MAP.USER_LIST, { username: value })
        .then((data) => {
          if (data.code === 0) {
            this.data = data.data.data;
          } else {
            this.data = [this.mySelf];
            this.$message.error(data.msg);
          }
        })
        .catch((e) => {
          console.log(e);
          this.data = [this.mySelf];
          this.$message.error("获取数据失败");
        })
        .finally(() => {});
    },
    handleChange(value) {
      this.value = value;
      this.$emit("change", this.value);
    },
  },
  mounted() {
    this.value = this.person;
    this.mySelf = {
      username: this.username,
      phoneNumber: this.userid,
    };
    this.data = [this.mySelf];
  },
};
</script>

<style>
</style>